<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text"  v-model="username"/>
    </div>
    <div>
      <span>年龄:</span>
      <input type="number"  v-model="ageder"/>
    </div>
    <div>
      <span>性别:</span>
      <select v-model="dre">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="fn">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in renderdata" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>
            <button @click="fn2(item.id)">删除</button>
            <button @click="fn1(item.id)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      renderdata:[
      {id:1, name: 'Tom', age: '19', gender: '男'}, 
      {id:2, name: 'jone', age: '21',  gender: '女'}, 
      ],
      username: '',
    ageder: '',
    dre: '',
      }
      
   
  },
  methods: {
    fn(){
     if(this.username.value>= 0 && this.ageder.value >= 0 && this.dre.value >= 0){
       const render = {
        id:this.renderdata.length,
         name: this.username, 
         age: this.ageder,
          gender: this.dre,
      }
      this.renderdata.push(render)
     }else{
      alert('输入的内容不能为空')
     }
    },
    fn1(id){
      const idd = this.renderdata.filter(item => item.id === id)
      this.username = idd[0].name,
      this.ageder = idd[0].age,
      this.dre = idd[0].gender
//  this.renderdata = this.renderdata.filter(item => item.id !== id)
      // this.username = item.name
    },
    fn2(id){
      this.renderdata = this.renderdata.filter(item => item.id !== id)
    }
  }
}
</script>
